<template>
  <div>
    <el-dialog title="新增员工" :visible="addshow" @close="buton">
      <el-form
        label-width="120px"
        :model="formDate"
        :rules="rules"
        ref="addFrom"
      >
        <el-form-item label="姓名" prop="username">
          <el-input
            style="width: 50%"
            placeholder="请输入姓名"
            v-model="formDate.username"
          />
        </el-form-item>
        <!-- 

     -->
        <el-form-item label="手机号" prop="mobile">
          <el-input
            style="width: 50%"
            placeholder="请输入手机号"
            v-model="formDate.mobile"
          />
        </el-form-item>
        <!-- 

         -->
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select
            v-model="formDate.formOfEmployment"
            placeholder="请输入聘用形式"
            style="width: 50%"
          >
            <el-option
              :label="item.value"
              :value="item.id"
              v-for="item in hireType.hireType"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 

     -->
        <el-form-item label="工号" prop="workNumber">
          <el-input
            style="width: 50%"
            placeholder="请输入工号"
            v-model="formDate.workNumber"
          />
        </el-form-item>
           <!-- 

     -->
         <el-form-item label="部门" prop="departmentName">
          <el-input
            style="width: 50%"
            placeholder="请输入部门"
            v-model="formDate.departmentName"
            @focus="getDepartments"
          />
          <el-tree
            :data="list"
            :props="defaultProps"
            @node-click="selectNode"
            :default-expand-all="true"
            v-if="show"
            v-loading="loading"
          />
        </el-form-item>
        <!-- 

         -->
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker
            style="width: 50%"
            placeholder="请输入入职时间"
            v-model="formDate.timeOfEntry"
          />
        </el-form-item>
        <!-- 

     -->
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker
            style="width: 50%"
            placeholder="请输入转正时间"
            v-model="formDate.correctionTime"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="buton">取 消</el-button>
        <el-button type="primary" size="small" @click="butok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入新增员工接口
import { addEmployee } from "@/api/employees";
// 引入部门组织结构
import { getDepartments } from "@/api/departments";
// 将获取的部门信息转化成树状图
import { tranListToTreeData } from "@/utils";
// 引入聘请形式
import hireType from "@/api/constant/employees";
export default {
  props: {
    addshow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 聘请形式的数组方法
      hireType,
      // 表单数据
      formDate: {
        username: "",
        mobile: "",
        formOfEmployment: "",
        workNumber: "",
        departmentName: "",
        timeOfEntry: "",
        correctionTime: "",
      },
      // 表单效验
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入正确的手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机格式不正确",
            trigger: "blur",
          },
        ],
        formOfEmployment: [
          { required: true, message: "请输入聘用形式", trigger: "blur" },
        ],
        workNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "请输入所在部门", trigger: "change" },
        ],
        timeOfEntry: [
          { required: true, message: "请输入入职时间", trigger: "blur" },
        ],
        // correctionTime:[ { required: true, message: '请输入用户名称', trigger: 'blur' }],
      },
      // 接收树状图的数据
      list: [],
      defaultProps: {
        label: "name",
      },
      // 控制树状图的显示与隐藏
      show: false,
      // 缓解加载时卡顿的问题
      loading: false,
    };
  },
  // computed(){
  //   this.addshow
  // }
  methods: {
    // 部门文本框获取焦点时获取数据
    async getDepartments() {
      // 加载时打开loding
      this.loading = true;
      // 显示树状图
      this.show = true;
      // 获取树状图的各个部门信息
      const { depts } = await getDepartments();
      // 调用递归函数转换成树状图
      this.list = tranListToTreeData(depts, "");
      this.loading = false;
    },
    // 点击的树状图节点赋值给文本框
    selectNode(node) {
      this.formDate.departmentName = node.name;
      this.show = false;
    },
    // 点击新增人员提交表单文件
    async butok() {
      try {
        // 首先验证表单数据
        await this.$refs.addFrom.validate();
        // 发起api请求
        await addEmployee(this.formDate);
        //关闭弹窗重新获取页面刷新
        // this.$emit('FN')
        // // 关闭弹窗
        // this.$emit("updata:addshow",false)

        this.$parent.FN();
        this.$parent.addshow = false;
      } catch (eeror) {
        console.log(eeror);
      }
    },
    buton() {
      // 点击取消清空数据
      this.formDate = {
        username: "",
        mobile: "",
        formOfEmployment: "",
        workNumber: "",
        departmentName: "",
        timeOfEntry: "",
        correctionTime: "",
      };
      // 清除表单效验的残留结果
      this.$refs.addFrom.resetFields();
      // 关闭他弹窗
      this.$parent.addshow = false;
    },
  },
};
</script>

<style>
</style>